/*eslint-disable*/
import { createUseStyles } from 'react-jss';
import { NavBox } from './NavStyle';
/**
 * 使用react-jss 创建样式
 * 相对于CssModule，react-jss 可以写在JS中并切套子元素,可以实现样式动态修改
 * 示例：
 * const useStyles = createUseStyles({
	nav: {
		color: 'black',
		// 嵌套写法
		'& .list': {
			display: 'flex',
			'& .item': {
				padding: '10px',
				'& .text': { 
					fontSize: '14px',
					'&:hover': {
						color: 'red'
					}
				}
			}
		}
	}
})
* 编译为：
.nav { color: black; }
.nav .list { display: flex; }
.nav .list .item { padding: 10px; }
.nav .list .item .text { font-size: 14px; }
.nav .list .item .text:hover { color: red; }
 */
const useStyles = createUseStyles({
	test: {
		color: 'red !important',
	}
})

const Nav = () => {
	const { test } = useStyles();
	return (
		<NavBox>
			<nav className="nav">
				<h2 className="nav-title">购物商城1</h2>
				<h3 className="title">购物商城2</h3>
				<div className="list">
					<a href="" className={test}>首页</a>
					<a href="">秒杀</a>
					<a href="">我的</a>
				</div>
			</nav>
		</NavBox>
	)
}

export default Nav;